<template>
    <div id="mylist">
        <div class="mylist_d1">
            <ul class="mylist_ul">
                <li class="mylist_li">
                    <div class="d1img"><img src="../../../../public/ycbimg/vipmylistimg.png" alt=""></div>
                    <div class="d2p">会员将于2022年1.4日到期</div>
                    <div class="d3span">></div>
                </li>
                <li class="mylist_li" v-for="(item,index) in mylit" :key="index">
                    <div class="d1img"><img :src="item.myimg" alt=""></div>
                    <div class="d2p"><b>{{item.mytitle}}</b></div>
                    <div class="d3span">></div>
                </li>
            </ul>
        </div>
        <div id="nul"></div>
    </div>
</template>

<script>
import getlink from "@/api/getapi.js";
export default {
  data() {
    return {
      mylit: []
      
    };
  },
  mounted(){
      getlink("/mock/data/Btlist").then((data)=>{
          this.mylit = data.data.mylist;
      })
  }
};
</script>

<style scoped>
#mylist{
    width: 100%;
    height: auto;
    background-color: #f9fbfa;
}
.mylist_d1{
    width: 3.45rem;
    margin: auto;
    background-color: #f9fbfa
}
.mylist_ul{
    width: 100%;
}
.mylist_li{
    width: 3.16rem;
    height: .46rem;
    margin: auto;
    background-color: white;
}
.d1img{
    width: .36rem;
    height: .46rem;
    float: left;
    margin-right: .05rem;
}
.d1img img{
    width: 100%;
    height: 100%;
}
.d2p{
    width: 2.4rem;
    height: 100%;
    line-height: .46rem;
    font-size: .14rem;
    float: left;
}
.d3span{
    width: .3rem;
    height: 100%;
    float: right;
    line-height: .46rem;
    text-align: center;
}
.mylist_li:nth-child(6){
    margin-bottom: .1rem;
}
#nul{
    width: 100%;
    height: 1.5rem;
}
.mylist_li:nth-child(1){
    background-color: #fde4bb;
}
</style>
